<template>
  <!-- 微信小程序 隐私新规相关代码 -->
  <TmModal
    title="提示"
    :overlay-click="false"
    :hideCancel="true"
    v-model:show="isOpen"
    :height="350"
    ok-text="同意"
    @cancel="handleCancel"
  >
    <view class="hb-text-center hb-text-sm hb-h-full">
      <view>在您使用前请仔细阅读,</view>
      <view class="hb-text-blue-500" @click="openPrivacyContract">{{ privacyContractName }}</view>
      <view>如果您同意,请点击"同意"继续使用</view>
    </view>
    <template #button>
      <button
        class="hb-h-11 hb-flex-1 hb-leading-11 hb-text-white hb-border-none"
        :style="{ backgroundColor: themeColor }"
        id="agree-btn"
        open-type="agreePrivacyAuthorization"
        @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
      >
        <text>同意</text>
      </button>
    </template>
  </TmModal>
</template>

<script setup lang="ts">
  import { watch, ref } from 'vue';
  import { useAppStore } from '@/store/modules/app';
  import { storeToRefs } from 'pinia';
  import { propTypes } from '@/utils/propTypes';
  import { useTmpiniaStore } from '@/tmui/tool/lib/tmpinia';

  const store = useTmpiniaStore();
  const themeColor = computed(() => store.getThemeColor);

  defineProps({
    showCancel: propTypes.bool.def(true),
  });

  const useApp = useAppStore();
  const isOpen = ref(false);
  const { privacyPopupVisible, privacyContractName } = storeToRefs(useApp);

  watch(privacyPopupVisible, (val) => (isOpen.value = val), { immediate: true });

  function handleCancel() {
    useApp.resolvePrivacyAuthorization?.({ event: 'disagree' });
    useApp.setPrivacyPopupVisible(false);
    console.log('handleCancel');
  }

  function handleAgreePrivacyAuthorization() {
    useApp.resolvePrivacyAuthorization?.({ buttonId: 'agree-btn', event: 'agree' });
    useApp.setPrivacyPopupVisible(false);
    console.log('handleAgreePrivacyAuthorization');
  }

  /** 跳转至隐私协议页面 */
  function openPrivacyContract() {
    // #ifdef MP
    if (wx.openPrivacyContract) {
      wx.openPrivacyContract({
        success: () => {},
        fail: () => {},
        complete: () => {},
      });
    }
    // #endif
  }
</script>

<style lang="scss" scoped>
  .privacy-popup {
    width: 600rpx;
    min-height: 326rpx;
    border-radius: 32rpx;
    background-color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .modal-title {
      padding-top: 42rpx;
      flex-shrink: 0;
      color: #333;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
    }
    .modal-content {
      width: 80%;
      margin: 0 auto;
      text-align: center;
      flex: 1;
      font-size: 28rpx;
      color: #808080;
    }
    .modal-bottom {
      height: 96rpx;
      flex-shrink: 0;
      border-top: 1px solid #ebedf0;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      .bottom-btn {
        height: 96rpx;
        line-height: 96rpx;
        flex: 1;
        text-align: center;
        color: #2878ff;
        font-size: 32rpx;
        border-radius: 0;
        &:active {
          background-color: rgba($color: #000000, $alpha: 0.1);
        }
      }
      .cancel {
        border-right: 1px solid #ebedf0;
      }
    }
  }
</style>
